import TableRender from '@/render/TableRender'
import type { AnyObject } from '@/types'
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import toNative from '@/utils/toNative'
import {
    getKeyToEnum,
    PayModeCnEnum
} from '@/const/enum'
import { deletePlans, exportPlans, getInsurancePlanList } from '@/api/insurance/period'
import Drawer from '@/components/drawer/Index'
import renderModal, {
    getModelValue,
    initModelValue,
    renderForm,
    type FormModalDto
} from '@/components/modal/Modal'
import type { RechargeDto } from '@/api/company/types'
import { confirmRecharge, getReceiptAccountList } from '@/api/audit'
import { Button, Image, ImagePreviewGroup, message } from 'ant-design-vue'

@Component
export class DrawerCheck extends TableRender {
    @Prop() show!: boolean
    @Prop() rechargeItemData!: RechargeDto

    showDrawer = false
    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Watch('show', { immediate: true })
    handleWatchShow() {
        this.showDrawer = this.show
    }
    @Emit('refresh')
    handleRefresh() {}

    @Watch('showDrawer', { immediate: true })
    handleWatchShowDialog() {
        this.basicForm = renderForm(this.basicFormConfig)
        this.updateShow(this.showDrawer)
        initModelValue(this.basicFormConfig, this.rechargeItemData)
        this.basicFormConfig.items.creditCodePicture.params.suffix = this.rechargeItemData
            .voucherUrl ? (
                <Image
                    class="w-100px h-100px"
                    src={this.rechargeItemData.voucherUrl}
                ></Image>
            ) : (
                <></>
            )
    }

    basicFormConfig = this.initFormConfig() as FormModalDto
    initFormConfig() {
        return {
            title: '',
            width: '400px',
            theme: 'light',
            show: false,
            items: {
                payMoney: {
                    name: '服务金额',
                    element: 'input',
                    readonly: true
                },
                payMode: {
                    name: '付款方式',
                    element: 'select',
                    optionsType: '',
                    required: true,
                    options: getKeyToEnum(PayModeCnEnum)
                },
                receiptId: {
                    name: '收款渠道',
                    element: 'select',
                    optionsType: 'channel',
                    required: true,
                    callback: {
                        method: async () => {
                            return (
                                await getReceiptAccountList(this.rechargeItemData.companyId)
                            ).map((i) => {
                                return {
                                    label: i.bankName,
                                    value: i.receiptId
                                }
                            })
                        }
                    }
                },
                creditCodePicture: {
                    name: '上传凭证',
                    element: 'text',
                    params: {
                        suffix: <Image class="w-100px h-100px" src=""></Image>
                    }
                },
                remark: {
                    name: '备注',
                    element: 'textarea',
                    params: {
                        rows: 4
                    }
                }
            },
            complete: async () => {
                const data = getModelValue(this.basicFormConfig)
                // await updatePayManagerUser(data)
                message.success('更新成功')
                this.basicFormConfig.show = false
            },
            cancel: () => {
                this.basicFormConfig.show = false
            },
            init: () => {}
        } as FormModalDto
    }
    basicForm = {
        validate: async () => {},
        clear: () => {},
        element: () => <> </>
    }

    // 驳回弹框
    rejectFormConfig = this.initRejectFormConfig() as FormModalDto
    initRejectFormConfig() {
        return {
            title: '驳回原因',
            width: '400px',
            theme: 'light',
            show: false,
            items: {
                remark: {
                    name: '备注',
                    element: 'textarea',
                    params: {
                        rows: 4
                    }
                }
            },
            params: {
                confirmText: '确定'
            },
            complete: async () => {
                // await updatePayManagerUser(data)
                this.onConfirm(2)
                message.success('更新成功')
                this.rejectFormConfig.show = false
            },
            cancel: () => {
                this.rejectFormConfig.show = false
            },
            init: () => {}
        } as FormModalDto
    }
    
    onReject() {
        this.rejectFormConfig.show = true
    }

    async onConfirm(isAgree: 1 | 2) {
        const params = getModelValue(this.basicFormConfig)
        const rejectParams = getModelValue(this.rejectFormConfig)
        await confirmRecharge({
            id: this.rechargeItemData.id,
            companyId: this.rechargeItemData.companyId,
            operateFlag: isAgree,
            payMode: params.payMode,
            receiptId: params.receiptId,
            remark: isAgree === 1 ? params.remark : rejectParams.remark
        })
        message.success('操作成功')
        this.showDrawer = false
        this.handleRefresh()
    }

    render() {
        return (
            <>
                <Drawer
                    v-model={this.showDrawer}
                    size={600}
                    resetStyle={true}
                    title={this.rechargeItemData.companyName}
                    showClose
                    v-slots={{
                        default: () => {
                            return <>{this.basicForm.element()}</>
                        },
                        footer: () => {
                            return (
                                <div class="flex justify-center">
                                    <Button onClick={this.onReject}>驳回</Button>
                                    <Button type="primary" onClick={() => this.onConfirm(1)}>
                                    通过
                                    </Button>
                                </div>
                            )
                        }
                    }}
                ></Drawer>
                { renderModal(this.rejectFormConfig)}
            </>

        )
    }
}

export default toNative<{ rechargeItemData: RechargeDto }, { refresh: () => void }>(DrawerCheck)
